<template>
  <div>
    <!-- 底部导航栏 -->
    <div :class="['fb-set','flex', 'dv p-10 ' ,'col-center', btn.length > 1 ? 'row-around' : 'row-center']">
      <van-button :to="btn.toPath"  round class="m-10"   :color="btn.color">{{ btn.name }}</van-button>
    </div>
    <div class="dvc"></div>
  </div>
</template>
 
 <script setup>
import { ref, defineProps } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
  btn: {
    type: Object,
    required: true,
  },
});

/**
 * 跳转
 */
const gto = (item) => {
  if (props.routerName != item.routerName) {
    router.push(item.route);
  }
};
</script>
 
 <style lang="scss" scoped>
.dv {
  height: 60px;
  background-color: #fff;
  padding: 20px;
}
.dvc{
    height: 60px;
}
.van-button{
  width: 200px;
height: 40px;
}
</style>